<template>
  <nav-bar v-if="device === 'desktop'" :titles="titles" :tab-index="tabIndex" @clickTitle="changeTab" ></nav-bar>
  <svg-icon v-if="device !== 'desktop'"  name="list" class="fixed left-3 top-3 z-10 cursor-pointer text-gray-300" @click="showSidebar= true" ></svg-icon>
  <div v-show="showSidebar" class="bg-black bg-image bg-opacity-30 z-20" @click="showSidebar= false"></div>
  <div v-if="device !== 'desktop'" class="w-60 h-full shadow-md bg-white absolute z-30 overflow-hidden transition-all" :class="showSidebar?'w-60':'w-0'">
    <ul class="relative">
      <li class="relative" v-for="(title, index) in titles" :key="index">
        <a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-gray-100 transition duration-300 ease-in-out" href="#" data-mdb-ripple="true" data-mdb-ripple-color="dark" @click="changeTab(index, true)">
          {{ title }}
        </a>
      </li>
    </ul>
  </div>
  <lang-selector v-if="device !== 'desktop'" class="fixed right-3 top-3 cursor-pointer z-10"></lang-selector>
  <full-page class="full-page-view p-0"  ref="fullPageView" :options="options">
    <div class="section">
      <!--:watchOverflow="false"  单页面滑动 生效-->
      <swiper class="full-page-swiper" :watchOverflow="false">
        <swiper-slide class="full-page-swiper-slide">
          <full-page1 @moveToNext="changeTab(1)"></full-page1>
        </swiper-slide>
      </swiper>
    </div>

    <div class="section">
      <swiper class="full-page-swiper" :watchOverflow="false">
        <swiper-slide class="full-page-swiper-slide">
          <full-page2 :index="tabIndex"></full-page2>
        </swiper-slide>
      </swiper>
    </div>

    <div class="section">
      <swiper class="full-page-swiper" :watchOverflow="false">
        <swiper-slide class="full-page-swiper-slide">
          <full-page3 :index="tabIndex"></full-page3>
        </swiper-slide>
      </swiper>
    </div>

    <div class="section">
      <swiper class="full-page-swiper" :watchOverflow="false">
        <swiper-slide class="full-page-swiper-slide">
          <full-page4 :index="tabIndex"></full-page4>
        </swiper-slide>
      </swiper>
    </div>

    <div class="section">
      <swiper class="full-page-swiper" :watchOverflow="false">
        <swiper-slide class="full-page-swiper-slide">
          <full-page5 :index="tabIndex"></full-page5>
        </swiper-slide>
      </swiper>
    </div>

    <div class="section">
      <swiper class="full-page-swiper" :watchOverflow="false">
        <swiper-slide class="full-page-swiper-slide">
          <full-page6 :index="tabIndex"></full-page6>
        </swiper-slide>
      </swiper>
    </div>

  </full-page>
</template>
<script setup name="FullPageView">
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

const { t } = useI18n();

const titles = reactive([t('nav.dashboard'), t('nav.blog'), t('nav.server'), t('nav.experience'), t('nav.objective'), t('nav.more')]);
const options = reactive({
  scrollBar: false,
  onLeave(or, des) {
    tabIndex.value = des.index;
  },
  resize: true,
  navigation: true,
  loopHorizontal: false,
  scrollingSpeed: 800,
  credits: { enabled: false },
  easingcss3: 'cubic-bezier(0.8,0,1,1)',
  navigationTooltips: titles
});

const tabIndex = ref(0);
const fullPageView = ref();
const device = inject('device');

const showSidebar = ref(false);

const changeTab = (index, sidebar = false) => {
  tabIndex.value = index;
  fullPageView.value.api.moveTo(index + 1);
  if (sidebar) {
    showSidebar.value = false;
  }
};

</script>
<style>
.section {
  @apply h-screen w-full relative;
}
.full-page-swiper {
  @apply h-full  w-full absolute top-0 left-0;
}
.full-page-swiper-slide{
  @apply h-full w-full lg:pt-12;
}

</style>
